<template>
  <div>
    <el-container style="height: 750px; border: 1px solid #eee">
      <el-aside style="width: 200px; background-color: #303133">
        <span>BUCTCODER</span>
        <el-menu
            background-color="#303133"
            text-color="#fff"
            active-text-color="#fffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-message"></i>
              <router-link to="/index">学生基本信息</router-link>
            </template>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-document"></i>
              <router-link to="/recent">近期比赛统计</router-link>
            </template>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-data-line"></i>
              <router-link to="/atcoderrank">各类排行榜单</router-link>
            </template>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header height="50px" background-color>
          <el-row>
            <el-col :span="23">
              <span>BUCTCODER</span>
            </el-col>
            <el-dropdown>
              <i class="el-icon-s-custom" style="margin-right: 10px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <router-link to="/">退出</router-link>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-row>
        </el-header>

        <el-main>
          <el-row>
            <el-col :span="6">
              <el-form :ref="form" :model="form" style="color: black">
                <el-button type="text">学生信息</el-button>
                <el-form-item prop="stuid" label="学号">
                  <el-input v-model="form.stuid" style="width: 120px" disabled></el-input>
                </el-form-item>
                <el-form-item prop="stuname" label="姓名">
                  <el-input v-model="form.stuname" style="width: 120px" disabled></el-input>
                </el-form-item >
                <el-form-item prop="stuclass" label="班级">
                  <el-input v-model="form.stuclass" style="width: 120px" disabled></el-input>
                </el-form-item >
                <el-form-item prop="stuAcid" label="atcoder账号">
                  <el-input v-model="form.stuAcid" style="width: 120px" disabled></el-input>
                </el-form-item >
                <el-form-item prop="stuCfid" label="codeforces账号1">
                  <el-input v-model="form.stuCfid" style="width: 120px" disabled></el-input>
                </el-form-item >
                <el-form-item prop="stuCfid1" label="codeforces账号2">
                  <el-input v-model="form.stuCfid1" style="width: 120px" disabled></el-input>
                </el-form-item >
                <el-form-item prop="stuCfid2" label="codeforces账号3">
                  <el-input v-model="form.stuCfid2" style="width: 120px" disabled></el-input>
                </el-form-item >
              </el-form>
            </el-col>
            <el-col :span="9">
              <div style="width: 450px;height: 280px" id="lineCharts"> </div>
            </el-col>
            <el-col :span="9">
              <div style="width: 450px;height: 280px" id="lineCharts1"> </div>
            </el-col>
            <el-col :span="9">
              <div style="width: 450px;height: 280px" id="lineCharts2"> </div>
            </el-col>
            <el-col :span="9">
              <div style="width: 450px;height: 280px" id="lineCharts3"> </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div style="width: 300px;height: 300px" id="lineCharts2"> </div>
            </el-col>
            <div style="color: #409EFF">
              <i class="el-icon-document"></i>
              <span>近期比赛</span>
            </div>
            <el-table :data="TableData" style="width: 900px" border fit highlight-current-row ref="editTable">
              <el-table-column prop="contestname" label="比赛名称">
                <template slot-scope="{row}">
                  <el-link class="sub-body" @click="preview(row)">{{row.contestname}}</el-link>
                </template>
              </el-table-column>
              <el-table-column prop="contestdate" label="比赛日期">
              </el-table-column>
              <el-table-column prop="tablename" label="比赛来源">
              </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagenum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pagesize"
                layout="prev, pager, next,  sizes, total, jumper"
                :total="total"
                style="text-align: center"
            ></el-pagination>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
let echarts = require("echarts/lib/echarts"); // 引入基本模板
require("echarts/lib/component/tooltip"); // 引入提示框
require("echarts/lib/component/title"); // title组件
export default {
  name: "student",
  data() {
    return {
      form:{},
      TableData: [],
      pagenum: 1,//当前加载的page
      pagesize: 10,//当前的limit
      total: 0//后台返回的总页数
    };
  },
  mounted(){
    this.initform();
    this.initTable();
    this.drawLine();
    this.drawLine1();
    this.drawLine2();
    this.drawLine3()
  },
  methods: {
    handleCurrentChange(val) {
      this.pagenum = val; //val可以获取当前用户选择的页码数
      this.initTable();//页面加载触发的查询所有的事件
    },
    //每页显示的条数大小改变时触发的方法
    handleSizeChange(val) {
      this.pagesize = val;//获取用户想要每页显示的条数
      this.initTable();
    },
    initform(){
      this.$axios.get("/userinfo/profile/"+this.$route.query.id)
          .then(response => {
            this.form = response.data.data.student;
          })
    },
    initTable() {
      this.$axios.get("/common/getcontestsbystuid/"+this.pagenum+"/"+this.pagesize+"/"+this.$route.query.id)
          .then(response => {
            this.TableData = response.data.data.list;
            this.total = response.data.data.total;
          })
    },
    drawLine() {
      var chartDom = document.getElementById('lineCharts');
      var myChart = echarts.init(chartDom);
      var option;
      this.$axios.get("/userinfo/profile/"+this.$route.query.id)
          .then(response => {
            if(response.data.data.accaree==null){
              var html='<span class="echarts-nodate"><i class="fontFamily yybzzanwushuju1"></i>atcoder账号暂无数据</span>'
              document.getElementById('lineCharts').innerHTML=html
              document.getElementById('lineCharts').removeAttribute('_echarts_instance_')
            }
            else{
              var score = response.data.data.accaree.scores;
              var time = response.data.data.accaree.contestadates;
              option = {
                title: {
                  subtext: 'atcoder账号的积分变化趋势图'
                },
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'cross'
                  }
                },
                toolbox: {
                  show: true,
                },
                xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: time,
                  axisLabel: {
                    textStyle: {
                      fontSize: '8'
                    }
                  }
                },
                yAxis: {
                  type: 'value',
                  axisLabel: {
                    formatter: '{value}'
                  },
                  axisPointer: {
                    snap: true
                  }
                },
                visualMap: {
                  show: false,
                  dimension: 0,
                  pieces: [{
                    lte: 6,
                    color: 'green'
                  },
                    {
                      gt: 6,
                      lte: 8,
                      color: 'green'
                    },
                    {
                      gt: 8,
                      lte: 14,
                      color: 'green'
                    },
                    {
                      gt: 14,
                      lte: 17,
                      color: 'green'
                    },
                    {
                      gt: 17,
                      color: 'green'
                    }
                  ]
                },
                series: [{
                  name: '积分',
                  type: 'line',
                  smooth: true,
                  data: score,
                  markArea: {
                    itemStyle: {
                      color: 'rgba(255, 173, 177, 0.4)'
                    },
                  }
                }]
              };
              option && myChart.setOption(option);
            }})
    },
    drawLine1() {
      var chartDom = document.getElementById('lineCharts1');
      var myChart = echarts.init(chartDom);
      var option;
      this.$axios.get("/userinfo/profile/"+this.$route.query.id)
          .then(response => {
            if(response.data.data.cfcaree==null){
              var html='<span class="echarts-nodate"><i class="fontFamily yybzzanwushuju1"></i>codeforces账号1暂无数据</span>'
              document.getElementById('lineCharts1').innerHTML=html
              document.getElementById('lineCharts1').removeAttribute('_echarts_instance_')
            }
            else{
              var score = response.data.data.cfcaree.scores;
              var time = response.data.data.cfcaree.contestadates;
              option = {
                title: {
                  subtext: 'codeforces账号1的积分变化趋势图'
                },
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'cross'
                  }
                },
                toolbox: {
                  show: true,
                },
                xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: time,
                  axisLabel: {
                    textStyle: {
                      fontSize: '8'
                    }
                  }
                },
                yAxis: {
                  type: 'value',
                  axisLabel: {
                    formatter: '{value}'
                  },
                  axisPointer: {
                    snap: true
                  }
                },
                visualMap: {
                  show: false,
                  dimension: 0,
                  pieces: [{
                    lte: 6,
                    color: 'green'
                  },
                    {
                      gt: 6,
                      lte: 8,
                      color: 'green'
                    },
                    {
                      gt: 8,
                      lte: 14,
                      color: 'green'
                    },
                    {
                      gt: 14,
                      lte: 17,
                      color: 'green'
                    },
                    {
                      gt: 17,
                      color: 'green'
                    }
                  ]
                },
                series: [{
                  name: '积分',
                  type: 'line',
                  smooth: true,
                  data: score,
                  markArea: {
                    itemStyle: {
                      color: 'rgba(255, 173, 177, 0.4)'
                    },
                  }
                }]
              };
              option && myChart.setOption(option);
            }})
    },
    drawLine2() {
      var chartDom = document.getElementById('lineCharts2');
      var myChart = echarts.init(chartDom);
      var option;
      this.$axios.get("/userinfo/profile/"+this.$route.query.id)
          .then(response => {
            if(response.data.data.cf1caree==null){
              var html='<span class="echarts-nodate"><i class="fontFamily yybzzanwushuju1"></i>codeforces账号2暂无数据</span>'
              document.getElementById('lineCharts2').innerHTML=html
              document.getElementById('lineCharts2').removeAttribute('_echarts_instance_')
            }
            else{
              var score = response.data.data.cf1caree.scores;
              var time = response.data.data.cf1caree.contestadates;
              option = {
                title: {
                  subtext: 'codeforces账号2的积分变化趋势图'
                },
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'cross'
                  }
                },
                toolbox: {
                  show: true,
                },
                xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: time,
                  axisLabel: {
                    textStyle: {
                      fontSize: '8'
                    }
                  }
                },
                yAxis: {
                  type: 'value',
                  axisLabel: {
                    formatter: '{value}'
                  },
                  axisPointer: {
                    snap: true
                  }
                },
                visualMap: {
                  show: false,
                  dimension: 0,
                  pieces: [{
                    lte: 6,
                    color: 'green'
                  },
                    {
                      gt: 6,
                      lte: 8,
                      color: 'green'
                    },
                    {
                      gt: 8,
                      lte: 14,
                      color: 'green'
                    },
                    {
                      gt: 14,
                      lte: 17,
                      color: 'green'
                    },
                    {
                      gt: 17,
                      color: 'green'
                    }
                  ]
                },
                series: [{
                  name: '积分',
                  type: 'line',
                  smooth: true,
                  data: score,
                  markArea: {
                    itemStyle: {
                      color: 'rgba(255, 173, 177, 0.4)'
                    },
                  }
                }]
              };
              option && myChart.setOption(option);
            }})
    },
    drawLine3() {
      var chartDom = document.getElementById('lineCharts3');
      var myChart = echarts.init(chartDom);
      var option;
      this.$axios.get("/userinfo/profile/"+this.$route.query.id)
          .then(response => {
            if(response.data.data.cf2caree==null){
              var html='<span class="echarts-nodate"><i class="fontFamily yybzzanwushuju1"></i>codeforces账号3暂无数据</span>'
              document.getElementById('lineCharts3').innerHTML=html
              document.getElementById('lineCharts3').removeAttribute('_echarts_instance_')
            }
            else{
              var score = response.data.data.cf2caree.scores;
              var time = response.data.data.cf2caree.contestadates;
              option = {
                title: {
                  subtext: 'codeforces账号3的积分变化趋势图'
                },
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'cross'
                  }
                },
                toolbox: {
                  show: true,
                },
                xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: time,
                  axisLabel: {
                    textStyle: {
                      fontSize: '8'
                    }
                  }
                },
                yAxis: {
                  type: 'value',
                  axisLabel: {
                    formatter: '{value}'
                  },
                  axisPointer: {
                    snap: true
                  }
                },
                visualMap: {
                  show: false,
                  dimension: 0,
                  pieces: [{
                    lte: 6,
                    color: 'green'
                  },
                    {
                      gt: 6,
                      lte: 8,
                      color: 'green'
                    },
                    {
                      gt: 8,
                      lte: 14,
                      color: 'green'
                    },
                    {
                      gt: 14,
                      lte: 17,
                      color: 'green'
                    },
                    {
                      gt: 17,
                      color: 'green'
                    }
                  ]
                },
                series: [{
                  name: '积分',
                  type: 'line',
                  smooth: true,
                  data: score,
                  markArea: {
                    itemStyle: {
                      color: 'rgba(255, 173, 177, 0.4)'
                    },
                  }
                }]
              };
              option && myChart.setOption(option);
            }})
    },
    preview(row) {
      if(row.tablename=='codeforces'){
        this.$router.push({path: '/contest1', query: {id: row.contestname}})
      }
      else{
        this.$router.push({path: '/contest', query: {id: row.contestname}})
      }
    }
  }
}
</script>
<style>
.el-header {
  background-color: #F5F5F5;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>